<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('预约明日班车')" />
    <th:block th:include="include :: datetimepicker-css" />
    <link th:href="@{/css/picker.css}" rel="stylesheet"/>

</head>

<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="edit">


            <input th:type="hidden" th:value="${session.name}" name="name">
            <input th:type="hidden" th:value="${session.phone}" name="shoujihao">

            <div class="form-group">
                <div class="col-sm-12" style="font-size: 18px;font-weight: bold" id="weekdaytext"></div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">线路：<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <select name="lineid" class="form-control" id="lineid" v-model="lineid"></select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">方向：<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <select name="banciid" class="form-control" id="banciid" v-model="banciid"></select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">站点：<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <select name="zhandianid" class="form-control" id="zhandianid" v-model="zhandianid"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6" style="text-align:center;">
                    <a id="yuyueButton" class="btn btn-primary btn-rounded btn-lg" @click="add()"><i class="fa fa-plus"></i>预约</a>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6" style="text-align:center;">
                    <a class="btn btn-warning btn-rounded btn-lg" href="/system/yuyue/orderlist">返回</a>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:src="@{/index/common/vue.js}"></script>
    <script th:src="@{/js/picker.js}"></script>

    <script th:inline="javascript">

        const vm = new Vue({
            el: '#edit',
            data: {
                prefix : ctx + "system/order",
                weekday : "",
                weekdaytext : "",

                name:$("input[name='name']").val(),
                shoujihao:$("input[name='shoujihao']").val(),
                lineid:'',
                banciid:'',
                zhandianid:'',


            },
            created: function () {
                var _this = this;

                _this.getWeekday();
                _this.InitSelect();
            },
            methods: {

                InitSelect:function(){
                    $.ajax({
                        type: "post",
                        url:  "/system/line/customlist",
                        data: {
                        },
                        success: function(r) {
                            $("#lineid").empty();
                            $("#lineid").append("<option value=''>请选择线路</option>");
                            for (var i = 0; i < r.length; i++) {
                                $("#lineid").append("<option value='" + r[i].lineid + "'>" + r[i].name + "</option>");
                            }
                        }
                    });
                },

                add:function() {
                    var _this = this;

                    var order = new Object();

                    order.name = $("input[name='name']").val();
                    order.shoujihao = $("input[name='shoujihao']").val();
                    order.lineid = $("select[name='lineid']").val();
                    order.banciid = $("select[name='banciid']").val();
                    order.zhandianid = $("select[name='zhandianid']").val();

                    if(!order.name){
                        alert("请填写姓名！");
                        return false;
                    }
                    if(!order.shoujihao){
                        alert("请填写电话！");
                        return false;
                    }else{
                        let pattern = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                        if(!pattern.test(order.shoujihao)){
                            alert("电话号码填写错误");
                            return false;
                        }
                    }
                    if(!order.lineid){
                        alert("请选择线路！");
                        return false;
                    }
                    if(!order.banciid){
                        alert("请选择方向！");
                        return false;
                    }
                    if(!order.zhandianid){
                        alert("请选择站点！");
                        return false;
                    }

                    $.ajax({
                        type: "post",
                        url:  _this.prefix+"/add",
                        data: {
                            "yuyuerenname":order.name,
                            "shoujihao":order.shoujihao,
                            'lineid':order.lineid,
                            'banciid':order.banciid,
                            'zhandianid':order.zhandianid,
                        },
                        success: function(r) {
                            if (r.code == 0) {
                                if (confirm("预约成功")) {
                                    location.href = '/system/yuyue/orderlist';
                                }
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
                },

                getWeekday : function(){
                    var day = new Date();

                    day.setTime(day.getTime()+24*60*60*1000);
                    var weekday_temp = day.getDay();

                    var hour = day.getHours();
                    if (hour>=17){
                        $("#yuyueButton").hide();
                    }

                    weekday = weekday_temp;
                    if (weekday=='1'){
                        weekdaytext = "星期一";
                        $("#weekdaytext").html("星期一");
                    }else if (weekday=='2'){
                        weekdaytext = "星期二";
                        $("#weekdaytext").html("星期二");
                    }else if (weekday=='3'){
                        weekdaytext = "星期三";
                        $("#weekdaytext").html("星期三");
                    }else if (weekday=='4'){
                        weekdaytext = "星期四";
                        $("#weekdaytext").html("星期四");
                    }else if (weekday=='5'){
                        weekdaytext = "星期五";
                        $("#weekdaytext").html("星期五");
                    }else if (weekday=='6'){
                        weekdaytext = "星期六";
                        $("#weekdaytext").html("星期六");
                    }

                },
            },
            watch:{
                lineid:function(){
                    $.ajax({
                        type: "post",
                        url:  "/system/banci/customlist",
                        data: {
                            'lineid' : $("#lineid").val(),
                            'day' : weekday,
                        },
                        success: function(r) {
                            $("#banciid").empty();
                            $("#zhandianid").empty();
                            $("#banciid").append("<option value=''>请选择方向</option>");
                            for (var i = 0; i < r.length; i++) {
                                $("#banciid").append("<option value='" + r[i].banciid + "'>" + r[i].name + "</optionname>");
                            }
                        }
                    });
                },

                banciid:function(){
                    $.ajax({
                        type: "post",
                        url:  "/system/zhandian/customlist",
                        data: {
                            'banciid' : $("#banciid").val(),
                        },
                        success: function(r) {
                            $("#zhandianid").empty();
                            /*$("#zhandianid").append("<option value=''>请选择上车站点</option>");*/
                            for (var i = 0; i < r.length; i++) {
                                $("#zhandianid").append("<option value='" + r[i].zhandianid + "'>" + r[i].name + "</option>");
                            }
                        }
                    });
                }
            },
        })
    </script>
</body>
</html>